<template>
    <el-container>
        <el-header height="20%">
            <el-row>
                <el-col :span="2">
                    <div class="grid-content bg-purple">
                    <label>所在地区:</label>
                    </div>
                </el-col>
                <el-col :span="2">
                    <div class="grid-content bg-purple">
                    <el-select v-model="selectedAreas" multiple placeholder="请选择">
                        <el-option v-for="item in areas" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    </div>
                </el-col>
                <el-col :span="2">
                    <div class="grid-content bg-purple">
                    <label>园区名称:</label>
                    </div>
                </el-col>
                <el-col :span="2">
                    <div class="grid-content bg-purple">
                    <el-select v-model="selectedDepartments" multiple placeholder="请选择">
                        <el-option v-for="item in departments" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                    <el-date-picker v-model="selectedDataPeriod" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2"></el-date-picker>
                    </div>
                </el-col>
                <el-col :span="2">
                    <div class="grid-content bg-purple">
                    <label>查询类型:</label>
                    </div>
                </el-col>
                <el-col :span="2">
                    <div class="grid-content bg-purple">
                        <el-select v-model="selectedSearchType" placeholder="请选择">
                            <el-option v-for="item in searchType" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="2">
                    <div class="grid-content bg-purple">
                    <el-button>查询</el-button>
                    </div>
                </el-col>
                <el-col :span="2">
                    <div class="grid-content bg-purple">
                    <el-button>导出EXCEL</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <el-main id='reportMain'>
            <el-table id='tableMain' :data="tableData" border style="width: 100%" >
                <el-table-column prop="date" label="日期" style="width: 15%;" >
                </el-table-column>
                <el-table-column prop="area" label="地区" style="width: 15%;" >
                </el-table-column>
                <el-table-column prop="department" label="园区" style="width: 20%;" >
                </el-table-column>
                <el-table-column prop="company" label="企业" style="width: 20%;">
                </el-table-column>
                <el-table-column prop="discharge" label="流量" style="width: 10%;" >
                </el-table-column>
                <el-table-column prop="temperature" label="温度" style="width: 10%;" >
                </el-table-column>
                <el-table-column prop="compressive" label="压力" style="width: 10%;" >
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>
</template>

<script>
    
    export default{
        name:'report',

        data(){
            return{
                //选中的区域数组,多选
                selectedAreas: [],

                //选中的园区数组,多选
                selectedDepartments: [],

                //初始化区域数据，后去从后台获取
                areas: [{
                    value: '选项1',
                    label: '上海'
                    }, {
                    value: '选项2',
                    label: '云南'
                    }, {
                    value: '选项3',
                    label: '内蒙古'
                    }, {
                    value: '选项4',
                    label: '北京'
                    }, {
                    value: '选项5',
                    label: '吉林'
                    }, {
                    value: '选项6',
                    label: '四川'
                    }, {
                    value: '选项7',
                    label: '天津'
                    }, {
                    value: '选项8',
                    label: '宁夏'
                    }, {
                    value: '选项9',
                    label: '安徽'
                    }, {
                    value: '选项10',
                    label: '山东'
                    }, {
                    value: '选项11',
                    label: '山西'
                    }, {
                    value: '选项12',
                    label: '广东'
                    }, {
                    value: '选项13',
                    label: '广西'
                    }, {
                    value: '选项14',
                    label: '新疆'
                    }, {
                    value: '选项15',
                    label: '江苏'
                    }, {
                    value: '选项16',
                    label: '江西'
                    }, {
                    value: '选项17',
                    label: '河北'
                    }, {
                    value: '选项18',
                    label: '河南'
                    }, {
                    value: '选项19',
                    label: '浙江'
                    }, {
                    value: '选项20',
                    label: '海南'
                    }, {
                    value: '选项21',
                    label: '湖北'
                    }, {
                    value: '选项22',
                    label: '湖南'
                    }, {
                    value: '选项23',
                    label: '甘肃'
                    }, {
                    value: '选项24',
                    label: '福建'
                    }, {
                    value: '选项25',
                    label: '西藏'
                    }, {
                    value: '选项26',
                    label: '贵州'
                    }, {
                    value: '选项27',
                    label: '辽宁'
                    }, {
                    value: '选项28',
                    label: '重庆'
                    }, {
                    value: '选项29',
                    label: '陕西'
                    }, {
                    value: '选项30',
                    label: '青海'
                    }, {
                    value: '选项31',
                    label: '黑龙江'
                    }, {
                    value: '选项32',
                    label: '香港'
                    }, {
                    value: '选33',
                    label: '澳门'
                    }, {
                    value: '选34',
                    label: '台湾'
                    }
                ],

                //初始化园区数据，后去从后台获取
                departments: [{
                    value: '选项1',
                    label: '黄金糕'
                    }, {
                    value: '选项2',
                    label: '双皮奶'
                    }, {
                    value: '选项3',
                    label: '蚵仔煎'
                    }, {
                    value: '选项4',
                    label: '龙须面'
                    }, {
                    value: '选项5',
                    label: '北京烤鸭'
                    }
                ],

                //初始化DatePicker 日期选择器
                pickerOptions2: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                        }
                    }]
                },

                //选中的日期区间
                selectedDataPeriod :'',

                //选中的查询类型
                selectedSearchType:'',

                //初始化查询类型：日，月，年
                searchType:[{
                    value: '选项1',
                    label: '日'
                    }, {
                    value: '选项2',
                    label: '月'
                    }, {
                    value: '选项3',
                    label: '年'
                    }
                ],

                tableData:[{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                },{
                    date: '2016-05-03',
                    area: '安徽省',
                    department: '合肥市创业园',
                    discharge:'1200',
                    temperature:'300',
                    compressive:'5kpa'
                }]
            }
        },

        methods:{
            
        },
    }
</script>